<template>
	<view>
		<view style="text-align:center; margin: 50px 0 30px;">
			<image style="width: 190px;" src="/static/icon/logo.png" mode="widthFix"></image>
		</view>

		<view class="form-view">
			<uni-forms ref="userFormRef" :model="userForm" :rules="rules">
				<uni-forms-item name="username">
					<uni-easyinput prefix-icon="person" trim="all" v-model="userForm.username"
						placeholder="请输入用户名"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput prefix-icon="locked" type="password" trim="all" v-model="userForm.password"
						placeholder="请输入密码"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @tap="login">登 录</button>

			<view class="other-view">
				<text @tap="toForgetPwd">忘记密码</text>
				<text @tap="toRegister">用户注册</text>
			</view>
		</view>
	</view>

	<view class="bottom-view">
		<view class="icon" style="background-color: #599ee3;">
			<uni-icons type="qq" size="32" color="white "></uni-icons>
		</view>
		<view class="icon" style="background-color: #07b75b;">
			<uni-icons type="weixin" size="32" color="white "></uni-icons>
		</view>
		<view class="icon" style="background-color: #d52c2b;">
			<uni-icons type="weibo " size="32" color="white "></uni-icons>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';


	const userForm = ref({});
	const userFormRef = ref();
	const token = ref({});

	import { useUserStore } from '@/stores/user';
	import storage from '@/utils/storage';
	let userStore = useUserStore();
	
	const login = () => {
		userFormRef.value.validate().then(async res => {
			// 登录
			let loginRes = await userStore.login(userForm.value.username, userForm.value.password);
			token.value = loginRes.data
			
			// 获取用户信息
			await userStore.getUserInfo();
			
			uni.showToast({
				icon:'success',
				title:'登录成功'
			})
			// 跳转首页
			setTimeout(function() {
				uni.switchTab({
					url:'/pages/index/index'
				})
			}, 2000)
			
		}).catch(err => {
			console.log('验证失败：', err);
		})
	}
	
	const toRegister = () => {
		uni.navigateTo({
			url:'/pages/register/register',
			animationType: 'pop-in',
			animationDuration: 200
		})
	}

	// 验证规格
	const rules = {
		username: {
			rules: [
				// 校验 username 不能为空
				{
					required: true,
					errorMessage: '请输入用户名',
				},
				{
					minLength: 3,
					errorMessage: '用户名长度最少 {minLength} 个字符',
				},
			]
		},
		password: {
			rules: [
				// 校验 password 不能为空
				{
					required: true,
					errorMessage: '请输入密码',
				},
				{
					minLength: 6,
					errorMessage: '密码长度最少 {minLength} 个字符',
				},
			]
		}
	};
</script>

<style lang="scss">
	.form-view {
		padding: 30px;
	}

	.other-view {
		display: flex;
		justify-content: space-between;
		color: blue;
		padding: 10px 0 0 0;
	}

	.bottom-view {
		box-sizing: border-box;
		position: fixed;
		bottom: 50px;
		padding: 0 30px;
		display: flex;
		justify-content: space-around;
		width: 100%;

		.icon {
			width: 46px;
			height: 46px;
			border-radius: 23px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>